require(['jquery','echarts'],function ($,echarts) {
    $(function () {
        var Chart_left = echarts.init(document.getElementById('chart_left'))
        var option_left = {
            title: {
                text: '2017年注册人数'
            },
            tooltip: {},
            legend: {
                data: ['人数']
            },
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [1000, 2000, 1036, 2501, 1002, 2001]
            }],
        };
    
        // 使用刚指定的配置项和数据显示图表。
        Chart_left.setOption(option_left);
    
    
        var Chart_right = echarts.init(document.getElementById('chart_right'))
        var option_right = {
            title: {
                text: '热门品牌销售',
                subtext: '2017年6月',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['耐克', '阿迪', '李宁', '新百伦', '阿迪王']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '耐克' },
                        { value: 310, name: '阿迪' },
                        { value: 234, name: '李宁' },
                        { value: 135, name: '新百伦' },
                        { value: 1548, name: '阿迪王' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        Chart_right.setOption(option_right);
    
    })
    
    // canvas
    $(function () {
        var canvas = $('#canvas')[0]
        canvas.width = window.innerWidth
        var ctx = canvas.getContext('2d')
        var arr = []
        // 球类
        function Ball(x, y) {
            this.x = x
            this.y = y
            this.r = Math.floor(Math.random() * 30)
            this.dx = Math.floor(Math.random() * 8) - 4
            this.dy = Math.floor(Math.random() * 8) - 4
            this.color = 'rgba(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',0.8)'
            arr.push(this)
        }
    
        Ball.prototype.render = function () {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true)
            ctx.fillStyle = this.color
            ctx.fill()
        }
        Ball.prototype.update = function () {
            this.x += this.dx
            this.y += this.dy
            this.r <= 0 ? arr.splice( arr.indexOf(this), 1 ) : this.r--
        }
        canvas.addEventListener('mousemove', function (e) {
            new Ball(e.clientX, e.clientY)
        })
        setInterval(function () {
            ctx.clearRect(0,0,window.innerWidth, 50)
            arr.forEach(function (ele,index) {
                ele.render()
                ele.update()
            })
        }, 30)
    })
})